<template>
  <div id='app'>
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="手机号">
          <el-input v-model="formInline.phone" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item label="注册时间">
           <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              value-format="yyyy-MM-dd"
              end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
         <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
       <el-table
      :data="tableData"
      style="width: 100%">
        <el-table-column
          prop="id"
          label="用戶ID"
          width="180">
        </el-table-column>
          <el-table-column
          prop="phone"
          label="手机号"
          width="180">
        </el-table-column>
          <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="注册时间">
        </el-table-column>
         <el-table-column
         :formatter="getStatus"
          label="状态">
        </el-table-column>
        <el-table-column
        label="操作">
        <template slot-scope="scope">
          <div>
            <el-button type="text" @click="handleSelectRole(scope.row)">分配菜单</el-button>
            <el-button type="text">分配资源</el-button>
          </div>
        </template>
    </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="formInline.currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"
      :disabled="isLoading"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="50%">

      <el-select v-model="roleIdList" multiple placeholder="请选择">
        <el-option
          v-for="item in roles"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"  @click="allocRole">确 定</el-button>
      </span>
    </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getUserListInfo } from '@/services/user'
import { getAllRole, allocateUserRoles, getAllRoleById } from '@/services/role'
// import { getAllRole } from '@/services/role'

export default {
  name: 'user-list',
  components: {},
  data () {
    return {
      dialogVisible: false,
      formInline: {
        currentPage: 0,
        pageSize: 0,
        phone: '',
        startCreateTime: '',
        endCreateTime: ''
      },
      value1: '',
      totalCount: 0,
      tableData: [],
      isLoading: false,
      roles: [],
      // 选中id组成的数组
      roleIdList: [],
      // 当前角色分配的id
      currentRoleId: null,
      userRolesList: []
    }
  },
  methods: {
    async getRolesById () {
      const { data } = await getAllRoleById(this.currentRoleId)
      console.log(data)
      if (data.code === '000000') {
        this.roleIdList = []
        for (let i = 0; i < data.data.length; i++) {
          console.log(data.data[i])
          this.roleIdList.push(data.data[i].id)
        }
      }
    },
    async allocRole () {
      const { data } = await allocateUserRoles({
        userId: this.currentRoleId,
        roleIdList: this.roleIdList
      })
      if (data.code === '000000') {
        this.$message.success('分配成功')
        this.dialogVisible = false
      }
    },
    async allocMenu () {},
    async handleSelectRole (row) {
      this.currentRoleId = row.id
      this.dialogVisible = true
      const { data } = await getAllRole()
      if (data.code === '000000') {
        this.roles = data.data
      }
      this.getRolesById()
    },
    onSubmit () {
      this.loadUserList()
    },
    handleSizeChange (val) {
      this.formInline.size = val
      this.formInline.currentPage = 1
      this.loadUserList()
    },
    handleCurrentChange (val) {
      this.formInline.currentPage = val
      this.loadUserList()
    },
    getStatus (row) {
      return row.status
    },
    async loadUserList () {
      if (this.value1) {
        this.formInline.startCreateTime = this.value1[0]
        this.formInline.endCreateTime = this.value1[0]
      }
      const { data } = await getUserListInfo(this.formInline)
      if (data.code === '000000') {
        this.tableData = data.data.records
        this.totalCount = data.data.total
      }
    }
  },
  created () {
    this.loadUserList()
  }
}

</script>
<style scoped>
.block{
    text-align: center;
    margin-top: 20px;
}
</style>
